<template>
	<view class="profile">
		<view class="profile-steps">
			<text class="profile-title">上传个人信息</text>
			<text class="profile-info">完善一下资料，就报名成功了</text>
			<up-steps :current="step" activeColor="#FD3523" inactiveColor="#E2E2E2" @click="handleNext">
				<up-steps-item title="证件上传"></up-steps-item>
				<up-steps-item title="资料填写"></up-steps-item>
			</up-steps>
		</view>
		<view v-if="step == 0">
			<!-- 寸照上传 -->
			<view class="profile-card">
			<view class="profile-title2-box">
				<text class="profile-title2">上传照片</text> 
				<text class="profile-title-link" @click="previewSample('portrait_img')">查看样板</text>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view class="portrait-upload">
					<view class="image-wrapper">
						<image :src="form.portrait_img" mode="aspectFit" class="portrait-image"></image>
						<view class="image-actions">
							<view class="action-btn" @click="previewImage('portrait_img')">
								<text class="iconfont icon-fangdajing"></text>
							</view>
							<view class="action-btn" @click="handleCamera('portrait_img')">
								<text class="iconfont icon-shangchuan"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="portrait-tips">
					<text class="tips-title">照片要求：</text>
					<text class="tips-item">1. 近期照片</text>
					<text class="tips-item">2. 照片清晰，五官可见，着装得体</text>
					<text class="tips-item">3. 背景为纯色，建议使用白色背景</text>
					<text class="tips-item">4. 照片大小不超过2MB</text>
					<text class="tips-item">5. 不要戴耳机，戴帽子</text>
				</view>
			</view>
        </view>
		<!-- 身份证上传 -->
		<view class="profile-card">
			<view class="profile-title2-box">
				<text class="profile-title2">上传证件资料</text> 
				<text class="profile-title-link" @click="previewSample('front_img')">查看样板</text>
			</view>
			<view class="cardId-box upload-box">
				<view class="upload-item">
					<view class="image-wrapper" style="width: 285rpx; height: 165rpx;" >
						<image :src="front_img" mode="aspectFit"></image>
						<view class="image-actions">
							<view class="action-btn" v-if="form.front_img" @click="previewImage('front_img')">
								<text class="iconfont icon-fangdajing"></text>
							</view>
							<view class="action-btn" @click="handleCamera('front_img')">
								<text class="iconfont icon-shangchuan"></text>
							</view>
						</view>
						<!-- <text class="cardId-box-item-text">身份证人像面</text> -->
					</view>
				</view>
				<view class="upload-item">
					<view class="image-wrapper" style="width: 285rpx; height: 165rpx;">
						<image :src="side_img" mode="aspectFit"></image>
						<view class="image-actions">
							<view class="action-btn" v-if="form.side_img" @click="previewImage('side_img')">
								<text class="iconfont icon-fangdajing"></text>
							</view>
							<view class="action-btn" @click="handleCamera('side_img')">
								<text class="iconfont icon-shangchuan"></text>
							</view>
						</view>
						<!-- <text class="cardId-box-item-text">身份证国徽面</text> -->
					</view>
				</view>
			</view>
			<view class="norm">
				<view class="norm-item">
					<image src="https://img.liangxibao.com/static/idcard3.png" mode="scaleToFill"></image>
					<text>标准</text>
				</view>
				<view class="norm-item">
					<image src="https://img.liangxibao.com/static/idcard4.png" mode="scaleToFill"></image>
					<text>缺失</text>
				</view>
				<view class="norm-item">
					<image src="https://img.liangxibao.com/static/idcard5.png" mode="scaleToFill"></image>
					<text>模糊</text>
				</view>
				<view class="norm-item">
					<image src="https://img.liangxibao.com/static/idcard6.png" mode="scaleToFill"></image>
					<text>曝光</text>
				</view>
			</view>
			<view class="profile-card" v-if="form.front_img">
				<view class="profile-header">
					<text class="profile-title2">个人资料</text>
					<view class="form-actions">
						<up-button v-if="!isEditing" type="primary" color="#FD3523" @click="handleEdit">修改</up-button>
						<up-button v-else type="primary" color="#FD3523" @click="handleSave">保存</up-button>
					</view>
				</view>
				<view class="profile-card-form">
					<up-form labelPosition="left" labelWidth="160rpx" :model="form" :rules="rules" ref="form">
						<up-form-item required label="真实姓名：" prop="nickname" borderBottom
							:customStyle="{ 'fontWeight': '700', 'padding': '30rpx 0' }">
							<up-input v-model="form.nickname" border="none" placeholder="请输入真实姓名"
								:disabled="!isEditing">
							</up-input>
						</up-form-item>
						<up-form-item required label="手机号码：" prop="phone" borderBottom
							:customStyle="{ 'fontWeight': '700', 'padding': '30rpx 0' }">
							<up-input v-model="form.phone" border="none" placeholder="请输入手机号码" :disabled="true">
							</up-input>
							<up-button type="primary" color="#FD3523" size="mini" @click="handleChangePhone">修改</up-button>
						</up-form-item>
						<up-form-item required label="身份证号：" prop="identity" borderBottom
							:customStyle="{ 'fontWeight': '700', 'padding': '30rpx 0' }">
							<up-input v-model="form.identity" border="none" placeholder="请输入身份证号码"
								:disabled="!isEditing">
							</up-input>
						</up-form-item>
						<up-form-item required label="民族：" prop="nationality" borderBottom
							:customStyle="{ 'fontWeight': '700', 'padding': '30rpx 0' }">
							<up-input v-model="form.nationality" border="none" placeholder="请输入民族"
								:disabled="!isEditing">
							</up-input>
						</up-form-item>

						<up-form-item required label="地址：" prop="address" borderBottom
							:customStyle="{ 'fontWeight': '700', 'padding': '30rpx 0' }">
							<up-textarea v-model="form.address" border="none" placeholder="请输入地址"
								:disabled="!isEditing">
							</up-textarea>
						</up-form-item>
					</up-form>
				</view>
			</view>
			<view class="next-button">
				<up-button iconColor="#FD3523" color="#FD3523" :plain="false" @click="handleNext">下一步</up-button>
				<!-- <up-button iconColor="#FD3523" color="#ffbcb6" :plain="true"
					@click="handleCancelt">身份证没在身边，稍后在传</up-button> -->
			</view>
		</view>
		<!-- 学历/户口本 /社保证明上传 -->
		<view class="profile-card">
			<text class="profile-title2">其他资料</text>
			<view class="upload-box">
				<view class="upload-item">
					<view class="image-wrapper">
						<image src="https://img.liangxibao.com/static/idcard1.png" mode="scaleToFill"></image>
						<view class="image-actions">
							<view class="action-btn" v-if="form.front_img" @click="previewImage('front_img')">
								<text class="iconfont icon-fangdajing"></text>
							</view>
							<view class="action-btn" @click="handleCamera('front_img')">
								<text class="iconfont icon-shangchuan"></text>
							</view>
						</view>
					</view>
					<text>学历/户口本</text>
				</view>
				<view class="upload-item">
					<view class="image-wrapper">
						<image src="https://img.liangxibao.com/static/idcard1.png" mode="scaleToFill"></image>
						<view class="image-actions">
							<view class="action-btn" v-if="form.front_img" @click="previewImage('front_img')">
								<text class="iconfont icon-fangdajing"></text>
							</view>
							<view class="action-btn" @click="handleCamera('front_img')">
								<text class="iconfont icon-shangchuan"></text>
							</view>
						</view>
					</view>
					<text>社保证明</text>
				</view>
			</view>
        </view>
		<!-- 身份证信息确认弹框 -->
		<up-popup ref="popupIdCard" :closeOnClickOverlay="false" mode="center" @change="popChange" closeable
			:round="'30rpx'">
			<view class="id-card-popup">
				<text class="popup-title">请确认身份证信息</text>
				<view class="id-info-list">
					<up-form labelPosition="left" labelWidth="160rpx" :model="tempForm" :rules="rules" ref="tempForm">
						<up-form-item required label="姓名：" prop="nickname" borderBottom
							:customStyle="{ 'fontWeight': '700', 'padding': '20rpx 0' }">
							<up-input v-model="tempForm.nickname" border="none" placeholder="请输入姓名"></up-input>
						</up-form-item>
						<up-form-item required label="性别：" prop="gender" borderBottom
							:customStyle="{ 'fontWeight': '700', 'padding': '20rpx 0' }">
							<up-input v-model="tempForm.gender" border="none" placeholder="请输入性别"></up-input>
						</up-form-item>
						<up-form-item required label="民族：" prop="nationality" borderBottom
							:customStyle="{ 'fontWeight': '700', 'padding': '20rpx 0' }">
							<up-input v-model="tempForm.nationality" border="none" placeholder="请输入民族"></up-input>
						</up-form-item>
						<up-form-item required label="身份证号：" prop="identity" borderBottom
							:customStyle="{ 'fontWeight': '700', 'padding': '20rpx 0' }">
							<up-input v-model="tempForm.identity" border="none" placeholder="请输入身份证号"></up-input>
						</up-form-item>
						<up-form-item required label="地址：" prop="address" borderBottom
							:customStyle="{ 'fontWeight': '700', 'padding': '20rpx 0' }">
							<up-textarea v-model="tempForm.address" border="none" placeholder="请输入地址"></up-textarea>
						</up-form-item>
					</up-form>
				</view>
				<view class="popup-actions">
					<up-button size="large" type="info" @click="handleReupload">重新上传</up-button>
					<up-button size="large" type="primary" color="#FD3523" @click="handleConfirmInfo">确认信息</up-button>
				</view>
			</view>
		</up-popup>
        <up-loading-page :loading="imgLoading" bgColor="#b1b1b173" color="#000" loading-text="图片上传中..." font-size="32rpx"></up-loading-page>

		</view>
		<view v-if="step == 1">
			<view class="profile-card">
				<view class="profile-title2-box">
					<text class="profile-title2">资料填写</text> 
					<text class="profile-title-link" @click="previewSample('portrait_img')">查看样板</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { parseTime, isIdCard } from '@/utils/tools.js'
import {
	putUserUpdate,
	getDetail,
} from '@/http/user.js'
export default {
	data() {
		return {
			fileList_front: [],
			fileList_reverse: [],
			imgLoading: false,
			front_img: "https://img.liangxibao.com/static/idcard1.png",
			side_img: "https://img.liangxibao.com/static/idcard2.png",
			token: '',
			data: {},
			side: '',
			step:1,
			form: {
				nickname: '',
				phone: '',
				identity: '',
				address: '',
				picUrl: '',
				gender: '',
				portrait_img:'',
				nationality: '',
			},
			rules: {
				nickname: [{
					required: true,
					message: '请输入真实姓名',
					trigger: ['blur', 'change']
				}],

				identity: [{
					required: true,
					message: '请输入身份证号码',
					trigger: ['blur', 'change']
				}, {
					validator: (rule, value, callback) => {
						console.log(value);
						try {
							isIdCard(value)
							callback()
						} catch (error) {
							callback(error.message)
						}
					},
					trigger: ['blur', 'change']
				}],
			},
			isEditing: false,
			showIdCardPopup: true,
			tempForm: {
				nickname: '',
				gender: '',
				nationality: '',
				identity: '',
				address: '',
			},
			orderId: "",
		}
	},
	onLoad(options) {
		console.log(options, 'options');
		
		this.orderId = options.orderId
		this.loadData()
		// 监听相机拍照结果
		uni.$on('getImage', async res => {
			try {
				console.log(res, 'res');
				if (res.type == 'front' || res.type == 'side') {
					const result = await this.uploadFileIdentityPromise(res.data)
					console.log(result, 'result');
					
					if (this.side == 'front') {
						this.form.address = result.address
						this.form.gender = result.gender
						this.form.identity = result.idnumber
						this.form.nationality = result.nationality
						this.form.nickname = result.name
					}
					this[`${res.type}_img`] = result.picUrl
					this.form[`${res.type}_img`] = result.picUrl
					uni.showToast({
						title: '上传成功',
						icon: 'success'
					})
					console.log(this.form, this[`${res.type}_img`], res.type);
				} else {
					const result = await this.uploadFilePromise(res.data)
					if (result) {
						// 更新对应的图片和表单数据
						this[`${res.type}_img`] = result
						this.form[`${res.type}_img`] = result
					}
				}
			} catch (err) {
				console.error('上传失败:', err)
				uni.showToast({
					title: '上传失败',
					icon: 'error'
				})
			} finally {
				uni.hideLoading()
			}
		})
	},
	methods: {
		handleCamera(val) {
			this.side = val
			let content = ''
			let type = ''
			if (val == 'front_img') {
				content = '请在光线充足,确保身份证4个边角完整并放置于平整的环境下拍摄'
				type = 'front'
			} else if (val == 'side_img') {
				content = '请在光线充足,确保身份证4个边角完整并放置于平整的环境下拍摄'
				type = 'side'
			} else if (val == 'portrait_img') {
				content = '请穿好衣服在光线充足,背景简单的环境下拍摄'
				type = 'portrait'
			}

			uni.showActionSheet({
				itemList: ['拍照', '从相册选择'],
				success: ({ tapIndex }) => {
					if (tapIndex == 0) {
						uni.showModal({
						title: '拍照提示',
						content: content,
						showCancel: false,
						confirmText: '我知道了',
						success: ({ confirm, cancel }) => {
							if (confirm) {
								uni.navigateTo({
									url: `/pages/profile/camera?coverImageType=${type}`
								})
							}
						}
					})
				}
					if (tapIndex == 1) {
						uni.showModal({
						title: '拍照提示',
						content: content,
						showCancel: false,
						confirmText: '我知道了',
						success: ({ confirm, cancel }) => {
							if (confirm) {
								uni.chooseImage({
									count: 1,
									sizeType: ['compressed'],
									sourceType: ['album'],
								})
								.then(res => {
									console.log(res);
								})
								.catch(err => {
									console.log(err);
								})
							}
						}
					})
					}
				},
				fail: (error) => {}
			})
		},
		popChange(e) {
			console.log(e);
		},
		loadData() {

			getDetail().then(res => {
				// this.$refs.popupIdCard.open();
				this.data = res.data
				this.form = {
					nickname: this.data.nickname,
					phone: this.data.phone,
					identity: this.data.identity,
					front_img: this.data.cardPicA || '',
					side_img: this.data.cardPicB || '',
					address: this.data.address,
					gender: this.data.gender == 1 ? '男' : '女',
					nationality: this.data.nationality,
					portrait_img: this.data.avatar || '',
				}
				console.log(this.form);
				this.front_img = this.data.cardPicA || 'https://img.liangxibao.com/static/idcard1.png'
				this.side_img = this.data.cardPicB || 'https://img.liangxibao.com/static/idcard2.png'
			})

		},
		// 身份证上传
		uploadFileIdentityPromise(fileData) {
			console.log(this.side);
			this.token = uni.getStorageSync('token')
			return new Promise((resolve, reject) => {
				// uni.showLoading({
				// 	title: '上传中',
				// 	mask: true
				// })
				this.imgLoading = true
				uni.uploadFile({
					url: 'https://api.liangxibao.com/aliyun/oss/uploadIdentityFile?side=' + (this.side == 'front' ? 'face' : this.side == 'side' ? 'back' : ''),
					name: 'file',
					filePath: fileData,
					header: {
						Authorization: this.token,
					},
					success: (res) => {
						if (res.statusCode === 200) {
							try {
								const data = JSON.parse(res.data)
								if (this.side === 'front') {
									// 更新临时表单数据
									this.tempForm = {
										nickname: data.data.name,
										gender: data.data.gender,
										nationality: data.data.nationality,
										identity: data.data.idnumber,
										address: data.data.address,
									}
									// uni.hideLoading()
									this.$refs.popupIdCard.open();
								}
								this.imgLoading = false
								resolve(data.data)
							} catch (err) {
						this.imgLoading = false

								reject(new Error('解析响应数据失败'))
							}
						} else {
						this.imgLoading = false

							reject(new Error('上传失败'))
						}
					},
					fail: (err) => {
						this.imgLoading = false
						reject(err)
					}
				})
			})
		},
		// 普通图片上传
		uploadFilePromise(fileData) {
			uni.showLoading({
				title: '上传中',
				mask: true
			})
			this.token = uni.getStorageSync('token')
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: 'https://api.liangxibao.com/aliyun/oss/uploadFile',
					name: 'file',
					filePath: fileData,
					header: {
						Authorization: this.token,
					},
					success: (res) => {
						if (res.statusCode === 200) {
							try {
								const data = JSON.parse(res.data)
								uni.hideLoading()
								resolve(data.data)
							} catch (err) {
								reject(new Error('解析响应数据失败'))
							}
						} else {
							reject(new Error('上传失败'))
						}
					},
					fail: (err) => {
						uni.hideLoading()
						reject(err)
					}
				})
			})
		},
		deletePic(event) {
			this[`fileList_${event.name}`] = this[`fileList_${event.name}`].filter((item, index) => {
				return index != event.index
			})
		},
		handleCancelt() {
			this.navigateToPortrait();
		},
		handleChangePhone() {
			uni.navigateTo({ url: '/pages/login/phone' })
		},
		handleNext() {

			if (this.form.front_img && this.form.side_img) {
				// 检查表单是否有修改
				const isFormModified = this.isFormModified();

				if (isFormModified) {
					let params = {
						nickname: this.form.nickname,
						phone: this.form.phone,
						identity: this.form.identity,
						cardPicA: this.form.front_img,
						cardPicB: this.form.side_img,
						address: this.form.address,
						gender: this.form.gender == '男' ? 1 : 0,
						nationality: this.form.nationality,
					}
					this.$refs.form.validate().then(valid => {
						if (valid) {
							uni.showLoading({
								title: '保存中',
								mask: true
							})
							putUserUpdate(params).then(res => {
								uni.hideLoading()
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								})
								// 更新本地存储的用户信息
								uni.setStorageSync('userinfo', {
									...this.form,
									...this.data
								})
								this.navigateToPortrait();
							}).catch(err => {
								uni.showToast({
									title: '保存失败',
									icon: 'error'
								})
							}).finally(() => {
								uni.hideLoading()
							})
						}
					})
				} else {
					this.navigateToPortrait();
				}
			} else {
				uni.showToast({
					title: '请上传' + (this.form.front_img == '' ? '人像面' : this.form.side_img == '' ? '国徽面' : '身份证'),
					icon: 'error'
				})
			}
		},
		isFormModified() {
			// 检查表单是否有修改
			const originalData = {
				nickname: this.data.nickname,
				phone: this.data.phone,
				identity: this.data.identity,
				address: this.data.address,
				gender: this.data.gender == 1 ? '男' : '女',
				nationality: this.data.nationality,
			};

			return Object.keys(originalData).some(key => {
				return this.form[key] !== originalData[key];
			});
		},
		navigateToPortrait() {
			uni.navigateTo({
				url: '/pages/profile/portrait?orderId=' + this.orderId
			});
		},
		previewImage(type) {
			uni.previewImage({
				urls: [this.form[type]],
				current: 0
			})
		},
		previewSample(){

		},
		handleEdit() {
			this.isEditing = true;
		},
		handleSave() {
			this.isEditing = false;
			console.log(this.form);
			let params = {
				nickname: this.form.nickname,
				phone: this.form.phone,
				identity: this.form.identity,
				address: this.form.address,
				gender: this.form.gender == '男' ? 1 : 0,
				nationality: this.form.nationality,
			}
			putUserUpdate(params).then(res => {
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				});
			}).catch(err => {
				uni.showToast({
					title: '保存失败',
					icon: 'error'
				});
			});
		},
		handleReupload() {
			this.$refs.popupIdCard.close();
			this.front_img = "https://img.liangxibao.com/static/idcard1.png";
			this.side_img = "https://img.liangxibao.com/static/idcard2.png";
		},
		handleConfirmInfo() {
			this.$refs.popupIdCard.close();
			// 将临时表单数据同步到正式表单
			Object.assign(this.form, this.tempForm);
		}
	}
}
</script>

<style lang="scss" scoped>
.profile {
	margin-top: 20rpx;

	.profile-steps {
		padding: 30rpx 30rpx;
		border-bottom: 10rpx solid #F7F6F9;
	}

	.profile-title {
		font-size: 42rpx;
		color: #12141A;
		display: block;
		font-weight: 700;
	}

	.profile-info {
		font-weight: 400;
		font-size: 26rpx;
		color: #80858F;
		display: block;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
	}
	.profile-title2-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.profile-title2 {
		font-weight: 700;
		font-size: 36rpx;
		color: #12141A;
		position: relative;

		&:before {
			content: "";
			position: absolute;
			z-index: -1;
			right: 0;
			bottom: 0;
			background: linear-gradient(90deg, #EDEDED, #FD3523FF);
			border-radius: 2rpx;
			width: 130rpx;
			height: 20rpx;
			opacity: .3;
		}
	}
	.profile-title-link {
		font-size: 24rpx;
		color: #238cfd;
		text-decoration:underline;
	}
}

.profile-card {
	padding: 30rpx;
	border-bottom: 10rpx solid #F7F6F9;
}

.cardId-box {
	display: flex;
	justify-content: space-evenly;

	.cardId-box-item {
		margin: 50rpx 0 35rpx 0;
		position: relative;

	
	}
}

::v-deep .up-upload__button {
	background: #fff;
}

.upload-box {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	margin-top: 30rpx;

	.upload-item {
		width: calc(50% - 10rpx);
		display: flex;
		flex-direction: column;
		align-items: center;

		.image-wrapper {
			position: relative;
			width: 100%;
			height: 240rpx;
			border-radius: 12rpx;
			overflow: hidden;
			background-color: #f5f5f5;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.image-actions {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				gap: 20rpx;
				transition: opacity 0.3s;

				.action-btn {
					width: 60rpx;
					height: 60rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					.iconfont {
						color: #fff;
						font-size: 32rpx;
					}

					&:active {
						opacity: 0.8;
					}
				}
			}

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.3);
				opacity: 0;
				transition: opacity 0.3s;
			}

			&:hover::before {
				opacity: 1;
			}
		}

		> text {
			display: block;
			font-size: 26rpx;
			color: #666;
			margin-top: 10rpx;
			text-align: center;
		}
	}
}


.norm {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 50rpx;
	margin-top: 40rpx;
	.norm-item {
		// display: flex;
		text-align: center;

		image {
			width: 145rpx;
			height: 125rpx;
		}

		text {
			display: block;
			font-weight: 400;
			font-size: 26rpx;
			color: #868686;
		}
	}
}

.profile-card-form {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 20rpx;
	margin-bottom: 30rpx;

	:deep(.up-form-item) {
		margin-bottom: 0;
	}

	:deep(.up-input) {
		padding: 0;
	}
}

.id-card-popup {
	padding: 30rpx;
	width: 600rpx;
	background-color: #fff;

	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
		color: #333;
	}

	.id-info-list {
		margin-bottom: 30rpx;

		:deep(.up-form-item) {
			margin-bottom: 0;
		}

		:deep(.up-input) {
			padding: 0;
		}
	}

	.popup-actions {
		display: flex;
		gap: 20rpx;
		padding: 0 20rpx;

		:deep(.up-button) {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
		}
	}
}

.profile-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;

	.profile-title2 {
		margin: 0;
	}

	.form-actions {
		margin: 0;

		:deep(.up-button) {
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 26rpx;
		}
	}
}

.next-button {
	position: fixed;
	bottom: 40rpx;
	left: 0;
	right: 0;
	padding: 0 30rpx;
	z-index: 100;

	:deep(.up-button) {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		border-radius: 44rpx;
	}
}

.profile {
	padding-bottom: 168rpx; // 为底部按钮留出空间
}

.portrait-upload {
    display: flex;
    justify-content: center;
    margin: 20rpx 0;
    .image-wrapper {
        position: relative;
        width: 295rpx;
        height: 413rpx;
        border-radius: 20rpx;
        overflow: hidden;
        background-color: #f5f5f5;

        .portrait-image {
            width: 100%;
            height: 100%;
        }

        .image-actions {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            gap: 20rpx;
            transition: opacity 0.3s;

            .action-btn {
                width: 80rpx;
                height: 80rpx;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;

                .iconfont {
                    color: #fff;
                    font-size: 40rpx;
                }

                &:active {
                    opacity: 0.8;
                }
            }
        }

        &:hover {
            .image-actions {
                opacity: 1;
            }
        }

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            opacity: 0;
            transition: opacity 0.3s;
        }

        &:hover::before {
            opacity: 1;
        }
    }
}

.portrait-tips {
    padding: 20rpx;
    background-color: #F7F6F9;
    border-radius: 20rpx;
	margin-left: 30rpx;

    .tips-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
        display: block;
		justify-content: space-around;
    }

    .tips-item {
        font-size: 26rpx;
        color: #666;
        display: block;
        margin-bottom: 10rpx;
    }
}
</style>